<script setup>
import {ref} from "vue";

defineProps({
  index: {type: Number, required: true},
  list: {type: Array, required: true}
})
const state = ref({current: 0})
</script>

<template>
  <view class="container row">
    <view class="item" v-for="(item,i) in list" :key="i" @mouseenter="state.current = i"
          :class="{active: state.current === i}"
          :style="{background: `url('https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_service_adv_${index}${i+1}.png')`,backgroundSize:'cover',backgroundRepeat: 'no-repeat'}">
      <view class="row main" :class="{active: state.current === i}">
        <view v-if="state.current === i" class="column box2">
          <img class="icon" width="18%" :src="`../images/icon_service/icon_service_adv_${item.icon}.png`" alt=""/>
          <view class="font48 top8">{{ item.title }}</view>
          <view class="font48 top1">{{ item.eng }}</view>
          <view class="font18 top2">{{ item.desc }}</view>
          <img class="right" src="../assets/icons/icon_arrow_circle.png" alt=""/>
        </view>
        <view v-else class="column box">
          <img class="icon" :src="`../images/icon_service/icon_service_adv_${item.icon}.png`"
               alt=""/>
          <view class="font32 top14 desc">{{ item.title }}</view>
          <img class="right" src="../assets/icons/icon_arrow_line.png" alt=""/>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
@keyframes hoverIn {
  from {
    width: 16.66%;
  }
  to {
    width: 50%;
  }
}

.container {
  padding: 0;
  height: calc(100vw * (1030 / 1920));

  .item {
    width: 16.66%;
    overflow: hidden;
    cursor: pointer;
    height: 100%;

    &.active {
      /*animation: hoverIn 0.3s ease-in forwards;*/
      width: 50%;
    }

    .main {
      height: 100%;
    }

    .box {
      padding: 40% 20% 0 20%;
      margin: auto 0;
      align-items: center;
      width: 100%;
      height: 50%;
      justify-content: space-between;

      .icon {
        width: 20%;
        height: 10%;
      }

      .desc {
        text-align: center;
        flex: 1;
      }

      .right {
        width: 20%;
      }
    }

    .box2 {
      justify-content: center;
      margin: auto 8em;
      padding-top: 30%;

      .right {
        width: 8%;
        margin-top: 4%;
      }
    }
  }
}
</style>